<style lang="less">
.echarts-line {
  width: 100%;
  height: 100%;
  position: relative;
  // &::before {
  //   content: "";
  //   display: block;
  //   width: 2px;
  //   height: 100%;
  //   background: #fff;
  //   position: absolute;
  //   left: 27px;
  //   top: 0;
  //   z-index: 99;
  // }
}
.echarts-tooltip--line {
  width: 178px;
  height: 70px;
  box-sizing: border-box;
  padding: 8px;
  background: rgba(244, 245, 247, 0.92) !important;
  border: none !important;
  box-shadow: none !important;
  position: absolute;
  right: -5000px;
}
</style>

<template>
  <div class="echarts-line" ref="echartsDomRef"></div>
</template>

<script setup lang="ts">
import {
  ref,
  onMounted,
  defineProps,
  toRaw,
  computed,
  watchEffect,
  toRefs,
  reactive,
} from "vue";
import * as echarts from "echarts";

interface PropsType {
  seriesName: string;
  data: Array<any>;
}

const props = defineProps<PropsType>();
let dataComp = props.data;

const echartsDomRef = ref();
const myEcharts: any = ref();

const initEcharts = () => {
  const option = ref({
    grid: {
      show: true,
      borderWidth: "0",
      top: "5%",
      bottom: "0",
      left: "1%",
      right: "1%",
      containLabel: true,
    },
    tooltip: {
      show: true,
      trigger: "axis",
      className: "echarts-tooltip--line",
      formatter: function (
        params: Array<{
          marker: string;
          seriesName: string;
          name: string;
          value: string;
        }>
      ) {
        let formatterText = `
      <div style="margin-bottom: 8px;font-size: 12px;line-height: 14px;">${params[0].name}</div>
      <div style="height:32px;display:flex;justify-content: space-between;align-items: center;background: #fff; padding: 0 8px;">
        <span>
          ${params[0].seriesName}
        </span>
        <span style="font-weight: 600;">${params[0].value}</span>
      </div>
       `;
        return formatterText;
      },
      axisPointer: {
        show: true,
        type: "line",
        // axis: 'y'
      },
    },
    xAxis: {
      boundaryGap: true, //默认，坐标轴留白策略
      axisLine: {
        show: false,
      },
      splitLine: {
        show: true,
        lineStyle: {
          type: "solid",
          color: "#e5e8ee",
        },
      },
      // alignTicks: true,
      axisTick: {
        show: false,
      },
      data: (function () {
        let dataArray: any = [];
        if (!dataComp) return dataArray;
        dataComp.forEach((it) => {
          dataArray.push(it.timeNode);
        });
        return dataArray;
      })(),
    },
    yAxis: {
      axisLine: {
        show: false,
      },
      splitLine: {
        show: true,
        lineStyle: {
          type: "dashed",
          color: "#e5e8ee",
        },
      },
      axisTick: {
        show: false,
      },
      splitArea: {
        show: true,
        areaStyle: {
          color: "#fff",
        },
      },
    },
    // dataZoom: {
    //   type: 'inside'
    // },
    series: [
      {
        name: props.seriesName,
        type: "line",
        smooth: true,
        symbol: "none",
        emphasis: {
          disabled: true,
        },
        lineStyle: {
          width: 4,
          color: {
            type: "linear",
            colorStops: [
              {
                offset: 0,
                color: "#1ee7ff", // 0% 处的颜色
              },
              {
                offset: 0.5,
                color: "#249aff", // 50% 处的颜色
              },
              {
                offset: 1,
                color: "#6f42fb", // 100% 处的颜色
              },
            ],
          },
        },
        data: (function () {
          let dataArray: any = [];
          if (!dataComp) return dataArray;
          dataComp.forEach((it) => {
            dataArray.push(it.value);
          });
          return dataArray;
        })(),
      },
    ],
  });
  myEcharts.value = echarts.init(echartsDomRef.value);
  toRaw(myEcharts.value).setOption(option.value);
};

onMounted(() => {
  initEcharts();
  window.addEventListener("resize", () => {
    toRaw(myEcharts.value).resize();
  });
});
watchEffect(() => {
  dataComp = props.data;
  if (myEcharts.value) {
    toRaw(myEcharts.value).clear();
    initEcharts();
  }
});
</script>
